<template>
	<view>
		<view class="ui-modal_box f-cb" v-if="open">
			<view class="ui-sharebox">
				<view class="items">
					<view class="tit">方式一 通过链接推广</view>
					<view class="link gui-flex">
						<view class="mr20">https://study.163.com/course/introduction/1004936034.htm</view>
						<button type="default" class="gui-button gui-bg-primary gui-noborder fz12 gui-color-white" style="width: 480rpx;height: 40px;padding:0 10px">
							复制链接分享
						</button>
					</view>
				</view>
				<view class="items">
					<view class="tit">方式二 微信内直接分享</view>
					<view class="desc">点击微信右上角三个点"..." 通过【发送给朋友】【分享到朋友圈】推广</view>
				</view>
			</view>	
			<view class="btnbox" @click="handleClose">取消</view>
		</view>
		<view class="overlay"  @click="handleClose" v-if="open"></view>
	</view>
</template>

<script>
	export default {
		name: "dialog",
		data() {
			return {
				open:false,
			}
		},
		methods:{
			handleClose(){
				this.open = false
			},
			handleOpen(){
				this.open = true
			}
		}
	}
</script>

<style scoped lang="scss">
.ui-sharebox{padding: 20px;}
.ui-modal_box{
	position: fixed;z-index: 1000;background: #fff;top:150px;box-shadow: 0 0 1em #ccc;width: 90%;
	left:5%;
	font-size:14px;
	.items{margin-bottom: 10px;}
	.tit{font-size:16px;font-weight: bold;padding: 10px 0;}
	.link{word-break: break-all;font-size:16px;}
}
.ui-modal_box+.overlay{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: rgba(0,0,0,.3);
}
.ui-modal_box .btnbox{
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 10px;
	text-align: center;
	font-size:14px;
	font-weight: bold;
	color:#36B378;
	border-top: 1px solid #eee;
}
</style>